<template>
  <div class="main-card">
    <div class="main-card-left">
      <!-- Left content -->
    </div>
    <div class="main-card-right">
      <div class="right-card">
        <h3>图片预览</h3>
        <div class="img-preview">
          <img v-for="(img, idx) in preview" :src="img" :key="idx" />
          <div v-if="preview.length === 0" class="empty">暂无图片</div>
        </div>
        <div class="helper-section">
          <h4>发布须知</h4>
          <ul class="helper-list">
            <li>请勿发布不良内容。</li>
            <li>图片需真实有效，描述要准确。</li>
            <li>如发现违规，平台有权删除信息。</li>
          </ul>
        </div>
        <div class="history-section">
          <h4>历史动态</h4>
          <ul class="history-list">
            <li v-for="(item, idx) in history" :key="idx">{{ item }}</li>
            <li v-if="!history || history.length === 0">暂无历史</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 图片预览数组
const preview = ref([])
// 历史动态示例
const history = ref(['今天阳光真好！', '分享了一篇好文章。'])
</script>

<style scoped>
.main-card {
  display: flex;
  min-height: 80vh;
  height: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 32px rgba(37, 99, 235, 0.10);
  align-items: stretch;
}
.main-card-left, .main-card-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.right-card {
  background: #f7faff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
  padding: 24px 18px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.img-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 48px;
}
.img-preview img {
  max-width: 80px;
  border-radius: 6px;
  box-shadow: 0 1px 4px #ccc;
}
.empty {
  color: #aaa;
  margin: 8px 0;
}
.helper-section {
  margin-top: 24px;
  background: #f1f5ff;
  border-radius: 8px;
  padding: 12px 14px;
}
.helper-section h4 {
  color: #2563eb;
  font-size: 1em;
  margin-bottom: 6px;
}
.helper-list {
  padding-left: 18px;
  color: #555;
  font-size: 0.98em;
  margin: 0;
}
.history-section {
  margin-top: 24px;
  background: #f1f5ff;
  border-radius: 8px;
  padding: 12px 14px;
}
.history-list {
  padding-left: 18px;
  color: #555;
  font-size: 0.98em;
  margin: 0;
}
@media (max-width: 900px) {
  .main-card {
    flex-direction: column;
    padding: 24px 8px;
  }
  .main-card-left, .main-card-right {
    width: 100%;
    min-width: 0;
  }
}
</style> 